<template>
  <div>
    <h3>青少年俱乐部调查统计表</h3>
    <div class="container">
      <vxe-toolbar>
        <template #buttons>
          <el-row type="flex" :gutter="10">
            <el-col :span="4" style="display: flex;">
              <el-date-picker v-model="searchForm.year" value-format="yyyy" type="year" @change="changeYear"
                placeholder="选择年份">
              </el-date-picker>
            </el-col>
            <el-col :span="4" style="display: flex;">
              <el-select v-model="searchForm.orgIdStr" size="small" multiple collapse-tags filterable clearable
                placeholder="选择学校名称">
                <el-option :label="item.orgName" :value="item.orgId" v-for="(item,index) in orgData"
                  :key="index"></el-option>
              </el-select>
              <el-button type="success" size="small" @click="selectOrgAll">全选</el-button>
            </el-col>
            <el-col :span="5" style="display: flex;">
              <el-button type="success" size="small" icon="el-icon-s-promotion" @click="getGroundAll"
                style="margin: 0 10px;"> 搜索</el-button>
              <vxe-button @click="clearTableFilter" status="warning" icon="el-icon-refresh-right"> 清空</vxe-button>
            </el-col>
            <el-col :span="4" style="margin-left: 40px;">
              <el-button type="success" size="medium" @click="handleCodeAdd">
                生成调查表二维码</el-button>
            </el-col>
          </el-row>
        </template>
      </vxe-toolbar>
      <vxe-table resizable ref="XTable" show-overflow border max-height="800" stripe highlight-hover-row
        highlight-current-row resizable :loading="loading" :data="dataList">
        <vxe-table-column field="createDate" title="填报时间" sortable></vxe-table-column>
        <vxe-table-column field="writePeople" title="填报人" sortable></vxe-table-column>
        <vxe-table-column field="orgName" title="填报机构" sortable></vxe-table-column>
        <vxe-table-column field="writePhone" title="联系电话" sortable></vxe-table-column>
        <vxe-table-column field="" title="操作" width="110">
          <template #default="{ row,rowIndex }">
            <el-button @click="examine(row,rowIndex)" type="success" size="medium" icon="el-icon-view"
              circle></el-button>
          </template>
        </vxe-table-column>
      </vxe-table>
      <vxe-pager :loading="loading" :current-page="page.currentPage" :page-size="page.pageSize"
        :total="page.totalResult" :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
        @page-change="handlePageChange">
      </vxe-pager>
    </div>
    <vxe-modal title="全国各级各类体校调查统计表" v-model="codeOpen" width="50%" append-to-body>
      <div>
        <div ref="qrCodeUrl"></div>
        <vue-qr ref="qrcode" :text="codeText" :size="500" colorDark="#000000"></vue-qr>
      </div>
      <el-button type="primary" @click="download">下载</el-button>
    </vxe-modal>

    <vxe-modal show-zoom v-model="insertModal" width="90%" height="1000px" title="全国青少年俱乐部调查统计表">
      <ClubQuestionnaire ref="datalist" :Alldata="Alldata"></ClubQuestionnaire>
    </vxe-modal>
  </div>
</template>

<script>
  import {
    selectSheet4,
    totalselect4,
    sheet4_all_sheet_orgName
  } from '@/api/statistics.js'
  import ClubQuestionnaire from "./components/ClubQuestionnaire1.vue"
  import VueQr from "vue-qr";
  import moment from 'moment';
  export default {
    components: {
      ClubQuestionnaire,
      VueQr
    },
    data() {
      return {
        orgData: [],
        Alldata: {},
        defaultDataList: [],
        dataList: [],
        codeOpen: false,
        codeText: "",
        page: {
          currentPage: 1,
          pageSize: 10,
          totalResult: 0
        },
        loading: false,
        filterName: '',
        insertModal: false,

        search: false,
        searchForm: {
          orgIdStr: [],
          year: moment().format("YYYY"),
        },

      }
    },
    mounted() {

      this.getGroundAll()
      this.selectschool()

    },


    methods: {

      //生成二维码
      handleCodeAdd() {
        this.codeOpen = true;
        this.codeText =
          window.location.origin + "/#/statistics/ClubQuestionnaire1";
      },

      //下载二维码
      async download() {
        const a = document.createElement("a");
        a.download = "二维码";
        a.href = this.$refs.qrcode.imgUrl;
        a.click();
      },

      //查看提交的表单
      examine(row, rowIndex) {
        const data = {
          orgName: row.orgName
        }
        this.insertModal = true
        totalselect4(data).then((res) => {
          // res.data.bean.fSheet2dList = res.data.fSheet2dMapList
          this.Alldata = res.data
          this.$refs.datalist.showbuut()


        })
      },



      //数据
      getGroundAll() {

        const data = {
          pageNum: this.page.currentPage,
          pageSize: this.page.pageSize,
          year: this.searchForm.year,
          orgIdList: this.searchForm.orgIdStr.join(',')
        }

        selectSheet4(data).then((res) => {
          this.dataList = res.data.dataList
        })


      },
      //清空
      clearTableFilter() {
        this.searchForm = {
          orgIdStr: [],
          year: this.searchForm.year,
        }
        this.page.pageNum = 1,
          this.page.pageSize = 10,
          this.getGroundAll()
      },


      //全选
      selectOrgAll() {
        this.searchForm.orgIdStr = []
        this.orgData.forEach(item => {
          this.searchForm.orgIdStr.push(item.orgId)
        })
      },


      //根据时间来获取新的学校
      changeYear() {
        this.selectschool()
      },
      //查全部机构
      selectschool() {
        sheet4_all_sheet_orgName().then(res => {
          this.orgData = res.data
        })
      },

      handlePageChange({
        currentPage,
        pageSize
      }) {
        this.page.currentPage = currentPage
        this.page.pageSize = pageSize
        this.getGroundAll()
      },


    }
  }
</script>

<style lang="scss" scoped>
  .container {
    background-color: #FFFFFF;
    padding: 10px;
  }
</style>
